<template>
	<view class="page">
		<view class="title">投诉原因</view>
		<view class="comment">
			<textarea placeholder="请详细描述投诉的原因..." v-model="content" maxlength="500"/>
		</view>
		<view class="title">上传凭证</view>
		<view>
			<u-upload width="195" @on-list-change="changeed" :action="action" name="file" :header="{token:token}" max-count="9"></u-upload>
		</view>
		
		<view class="btn-box">
			<u-button shape="circle" type="primary" @click="post">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				title:'',
				content:'',
				images:[],
				action:''
			}
		},
		methods: {
			post(){
				if(!this.content){this.$u.toast('投诉原因不能为空');return;}
				this.$u.post('/api/user/complaint',{
					status:3,
					admin_housekeeper_id:this.id,
					title:this.title,
					content:this.content,
					images:this.images.join()
				}).then(res=>{
					uni.showModal({
						showCancel:!1,
						content:'提交成功',
						success: () => {
							this.$app.back()
						}
					})
				})
			},
			changeed(lists,name){
				if(lists.every(item=>item.response)){
					this.images = lists.map(i=>i.response.data.fullurl)
				}
			}
		},
		onLoad({id}) {
			this.id = id
			this.action = this.$u.api.uploadUrl()
		}
	}
</script>

<style lang="scss">
	.page{
		padding: 0 40rpx;
		.title{padding: 20rpx 0;}
		.comment{padding: 20rpx;height: 400rpx;border-radius: 20rpx;background-color: #f4f5f6;
			textarea{width: 100%;height: 100%;box-sizing: border-box;}
		}
		.btn-box{padding: 50rpx 0 0;}
	}
</style>
